<template>
  <view class="content" :style="{ paddingTop: H_content + 'px', paddingBottom: '90px' }">
    <view class="title-area" :style="{ height: H_content + 10 + 'px' }">
      <view :style="{ height: H_top + 'px' }"></view>
      <view class="nav-bar-title" :style="{ fontSize: '36rpx;', height: H_height + 'px', lineHeight: H_height + 'px', textAlign: 'center', color: '#000' }">
        <image @click="search" style="margin-left: 30rpx; height: 50rpx;width: 50rpx;" src="/static/lzl/Search@2x.png" mode=""></image>
        <!-- <view style="margin-left: 50%;transform: translateX(-100%);font-size: 32rpx;">亚麻艺术家</view> -->
        <view style="margin-left: 50%;transform: translateX(-85%);display: flex;align-items: center; font-size: 32rpx;">
          <image src="/static/lzl/439eab05-488f-43e7-992e-f94f405aeb98 1@2x.png" style="width: 218rpx;height: 64rpx;" mode=""></image>
        </view>
      </view>
    </view>
    <tabBar :top="H_content" numBer="3"></tabBar>
    <!-- 上面的tabs -->
    <view class="tabs" style="position: fixed;width: 100%;">
      <!-- <u-tabs :activeStyle="{ color: '#0A0A09' }" :inactiveStyle="{ color: '#C2C1BF' }" :list="list1" lineColor="#8A2224" lineWidth="40" @click="changeClick"></u-tabs> -->
      <u-tabs
        :list="list1"
        name="title"
        :is-scroll="true"
        font-size="32"
        :bold="false"
        active-color="#0A0A09"
        inactive-color="#C2C1BF"
        bar-width="64"
        bar-height="3"
        :bar-style="{ backgroundColor: '#8A2224' }"
        :current="current"
        @change="change"
      ></u-tabs>
    </view>
    <!-- 下方主题内容 -->

    <view style="padding: 20rpx 32rpx;padding-top: 100rpx;">
      <u-parse :html="title"></u-parse>
      <!-- {{  }} -->
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex';
export default {
  computed: {
    ...mapState(['H_top', 'H_height', 'H_content'])
  },
  data() {
    return {
      current: 0,
      title: '',
      list1: [
        {
          name: '关于品牌',
          id: 1
        },
        {
          name: '关于亚麻',
          id: 2
        },
        {
          name: '尺码指南',
          id: 3
        },
        {
          name: '产品养护',
          id: 4
        },
        {
          name: '配送包装',
          id: 5
        }
      ]
    };
  },
  onLoad() {},
  onShow() {
    this.init();
  },
  methods: {
    search() {
      uni.navigateTo({
        url: '/pages/search/searchSon/searchSon'
      });
    },
    async init(id) {
      let n = await this.$api.richtext();
      this.list1 = n.data;
      let m = await this.$api.richtext({ id: this.list1[0].id });
      this.title = m.data.content;
    },
    changeClick(e) {
      console.log(e);
    },
    // 切换tabs
    async change(e) {
      this.current = e;
      let n = await this.$api.richtext({ id: this.list1[e].id });
      this.title = n.data.content;
    }
  }
};
</script>

<style lang="scss">
* {
  box-sizing: border-box;
}
.title-area {
  width: 100%;
  background-color: #fff;
  color: #000;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
}
.nav-bar-title {
  display: flex;
  // justify-content: ;
  align-items: center;
}
.tit {
  font-size: 32rpx;
  font-family: 'DingTalk JinBuTi-Regular, DingTalk JinBuTi';
  font-weight: 400;
  color: #322922;
}
</style>
